<template>
    <van-nav-bar :title="productData.brand" left-text="返回" right-text="..." left-arrow @click-left="onClickLeft"
        @click-right="onClickRight"> <template #right>
            <van-icon name="share-o" size="25" />
        </template></van-nav-bar>
    <!-- 111111111111111 -->
    <!-- 上方分享按钮 -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <!-- 222222222 -->

    <div class="detail-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img :src="productData.img1" alt=""></van-swipe-item>
            <van-swipe-item><img :src="productData.img2" alt=""></van-swipe-item>
            <van-swipe-item><img :src="productData.img3" alt=""></van-swipe-item>
            <van-swipe-item><img :src="productData.img4" alt=""></van-swipe-item>
        </van-swipe>
    </div>
    <div class="detail-text">
        <span class="money">￥{{ productData.originprice }}
        </span>
        <p class="p-text">{{ productData.proname }}</p>
    </div>

    <van-action-bar class="detail-bottom" safe-area-inset-bottom>
        <van-action-bar-icon icon="chat-o" text="评论" @click="startPings" />
        <van-action-bar-icon icon="cart-o" text="购物车" to="/car" />
        <van-action-bar-icon icon="star-o" text="收藏" />
        <van-action-bar-button type="warning" text="加入购物车" @click="addToCart(productData.proid)" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>


    <!--    66666666666       -->
    <!-- <div class="popbox">
        <h3 class="title">
            商品评论
        </h3>
        <div class="edit-box">
            <van-field v-model="model.message" rows="5" autosize type="textarea" maxlength="500" placeholder="请输入评论内容"
                show-word-limit class="ping-area" />
            <div class="ping-star">
                <span style="font-size:15px;">打分: </span><van-rate v-model="model.star" />
            </div>
            <van-button @click="addToPingList" block type="primary" class="mt10">发布评论</van-button>
        </div>
        <div class="edit-msg">
            <div class="edit-list" v-if="pingList.filter(v => v.proid == route.params.proid).length > 0">
                <div class="edit-item" v-for="(item, index) in pingList.filter(v => v.proid == route.params.proid)"
                    :key="index">
                    <div class="name item ">
                        {{ item.name }}
                    </div>
                    <div class="time item ">
                        {{ dateFormatInit(item.time) }}
                    </div>
                    <div class="star item">
                        评分: <van-rate v-model="item.star" readonly />
                    </div>
                    <div class="content item">
                        {{ item.message }}
                    </div>
                </div>
            </div>
            <div class="empty" v-else>
                <van-empty description="暂无评论,请先发布评论哦" />
            </div>
        </div>
    </div> -->
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { showToast } from 'vant';
import { useProductStore } from '../store/product'
import { useCartStore } from '../store/cart'
import { getOrderListApi } from '../api/order'
import { useCommon } from '../hooks/useCommon'
import { useUserStore } from '@/store/user';


const { dateFormatInit } = useCommon()
const model = reactive({
    star: 5,
    message: ''
})
const showShare = ref(false);
const show = ref(false)
const route = useRoute()


const productStore = useProductStore()
const CartStore = useCartStore()
const { cartList, pingList } = toRefs(CartStore)  // 数据响应式
const userid = localStorage.getItem('id')
const { userInfo }: any = useUserStore()

const { fetchCartList, setPingList } = CartStore;
const productData = ref<Product>({} as Product)
const hasPing = ref(false)
const onClickLeft = () => history.back();

const addToPingList = () => {
    let params = {
        ...model,
        proid: route.params.proid,
        time: new Date(),
        name: userInfo.username
    }
    pingList.value.unshift(params);
    setPingList(pingList.value)
    model.star = 5;
    model.message = ''
}


const onClickRight = () => {
    showShare.value = true
}

const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
};



//  评论
const startPings = () => {
    if (hasPing.value) {
        show.value = true;
    } else {
        showToast('你还没有购买这个商品,无法评论')
    }
}
const getOrderList = async () => {
    let res: Result = await getOrderListApi(userid)
    if (res.code == '200') {
        // 判断是否买过这个商品 
        res.data.forEach((item) => {
            if (item.proid == route.params.proid) {
                hasPing.value = true;
            } else {
                console.log('没有');

            }
        })
    }
}

const addToCart = async (proid: string) => {
    // console.log(productData.proid)
    cartStore.addToCart(proid)
}

onMounted(
    async () => {
        const product = productStore.fetchProduct(route.params.id as string)
        if (product) {
            // store 里能找到, 直接使用, 可以不用发请求
            productData.value = product
        } else {
            // store 里找不到, 发送请求
            const product = await productStore.requestProduct(route.params.id as string)
            productData.value = product
        }
        console.log(productData)
    }
)

</script>

<style>
.money {
    color: red;
    display: block;
    /* margin-bottom: 20px; */
}

.p-text {
    font-size: 16px;
    font-weight: 300;
}

.detail-swipe {
    margin-bottom: 0px;
}

van-swipe-item {
    height: 400px;
}

.my-swipe {
    height: 420px;
}

.my-swipe img {
    margin: auto;
    display: block;
    width: 90%;
    height: 420px;
}

.detail-text {
    margin: auto;
    width: 90vw;
}

.detail-bottom {
    margin-bottom: 50px;
}




.good {
    padding: 15px;

}

.gimg {
    width: 100%;
    height: 300px;
}

.popbox {
    padding-top: 40px;
}

.title {
    color: #333;
    text-align: center;
}

.edit-box {
    padding: 10px;
}

.ping-area {
    border: 1px solid #ddd;
    border-radius: 10px;
}

.ping-star {
    margin-top: 15px;
}

.mt10 {
    margin-top: 10px;
}</style>